<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1400px" append-to-body>
        <el-row class="mb8">
            <el-button type="primary" icon="el-icon-plus" @click="addItem">新增</el-button>
          </el-row>
        <el-form ref="form" :model="model" class="form-ad-class">
            <el-table border :data="model.tableData" v-loading="loading.get">
                <el-table-column label="广告ID" prop="advertiser_id" min-width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-form-item prop="advertiser_id">
                        <el-select v-model="scope.row.advertiser_id" placeholder="请选择" clearable size="small" filterable>
                            <el-option v-for="item in dict.advertiserList" :key="item.id" :label="item.advertiser_id" :value="item.advertiser_id">
                                <span style="float: left">{{ item.advertiser_name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.advertiser_id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="归属人" prop="admin_name" min-width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-form-item prop="admin_name">
                        <el-select v-model="scope.row.admin_name" placeholder="请选择" clearable size="small" filterable>
                            <el-option v-for="item in dict.onSaleList" :key="item.id" :label="item.nickname" :value="item.id">
                                <span style="float: left">{{ item.nickname }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="店铺" prop="shop_name" min-width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-form-item prop="shop_name">
                        <el-select v-model="scope.row.shop_id" placeholder="请选择" clearable size="small" filterabl>
                            <el-option v-for="item in dict.shopList" :key="item.shop_id" :label="item.shop_name" :value="item.shop_id">
                                <span style="float: left">{{ item.shop_name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.shop_id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="归属开始时间" prop="createtime" min-width="200">
                <template slot-scope="scope">   
                    <el-form-item prop="createtime">
                        <el-date-picker v-model="scope.row.createtime" type="date" value-format="yyyy-MM-dd" placeholder="请选择" clearable> </el-date-picker>
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="归属结束时间" prop="updatetime" min-width="200">
                <template slot-scope="scope">   
                    <el-form-item prop="updatetime">
                        <el-date-picker v-model="scope.row.updatetime" type="date" value-format="yyyy-MM-dd" placeholder="请选择" clearable> </el-date-picker>
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="status" min-width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="saveItem(scope.row, scope.$index)" :disabled="loading.save">保存</el-button>
                    <el-button type="text" @click="deleteItem(scope.row, scope.$index)" :disabled="loading.delete">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
</template>

<script>
import { getShopList,  getOnSalesList } from '@/api/shop'
import { editAscription, deleteAscription, getAdvistementList  } from '@/api/advertisement'

export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            model: {
                tableData: []
            },
            dict: {
                shopList: [],
                onSaleList: [],
                advertiserList: []
            },
            loading: {
                get: false,
                save: false,
                delete: false
            },
        }
    },
    computed: {
        title() {
            return `新增归属`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    async mounted() {
        this.loading.get =true
        try {
            const [shopData, onSaleData, accountData] = await Promise.all([getShopList(), getOnSalesList(), getAdvistementList()])
            this.dict.shopList = shopData?.data?.list ?? []
            this.dict.onSaleList= onSaleData?.data ?? [];
            this.dict.advertiserList = accountData?.data ?? [];
        } catch (error) {
            console.log(error)
        }
        this.addItem()
        this.loading.get=false
    },
    methods: {
        addItem() {
            const defaultItem = {
                advertiser_id: '',
                admin_name: '',
                shop_id: '',
                createtime: '',
                updatetime: ''
            }
            this.model.tableData.push(defaultItem)
        },
        deleteItem(item, index){
            this.$confirm(`是否确认删除?`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading.delete = true
                deleteAscription(item).then(res=>{
                    this.$message.success(res.msg)
                    this.model.tableData.splice(index, 1)
                    this.$emit('success')
                }).finally(()=>{
                    this.loading.delete = false
                })
            }).catch(() => { })
        },
        saveItem(item) {
            this.loading.save = true
            editAscription(item).then(res=>{
                item.id = res.data.id
                this.$message.success(res.msg)
                // this.model.tableData[index]
                this.$emit('success')
            }).finally(()=>{
                this.loading.save = false
            })
        },
    },
}
</script>

<style>
.form-ad-class.el-form .el-form-item {
    margin: 0;
}
/* .form-ad-class.el-form .el-form-item .el-input {
    width: 160px;
} */
</style>
